import React, { useContext } from "react";
import Link from "next/link";
import moment from "moment";
import { Comment as CommentIcon } from "@styled-icons/boxicons-regular/Comment";
import { File } from "@styled-icons/boxicons-regular/File";
import { News } from "@styled-icons/boxicons-regular/News";
import { CommentAdd } from "@styled-icons/boxicons-regular/CommentAdd";
import { Star } from "@styled-icons/boxicons-solid/Star";
import { Star as StarEmpty } from "@styled-icons/boxicons-regular/Star";
import Box from "./Box";
import Text from "./Text";
import LocaleContext from "../utils/LocaleContext";

const RatingStars = ({ score }) => {
  return (
    <Box display="flex" alignItems="center">
      {[1, 2, 3, 4, 5].map((star) => (
        <Box
          key={star}
          as={star <= score ? Star : StarEmpty}
          size={16}
          color={star <= score ? "primary" : "grey"}
          mr={1}
        />
      ))}
    </Box>
  );
};

const Comment = ({ comment }) => {
  const { getLocaleString } = useContext(LocaleContext);

  return (
    <Box
      p={4}
      borderTop="1px solid"
      borderColor="border"
      _css={{
        "&:last-child": {
          borderBottom: "1px solid",
          borderBottomColor: "border",
        },
      }}
    >
      <Box
        display="flex"
        flexDirection={["column", "row"]}
        alignItems={["flex-start", "center"]}
        justifyContent="space-between"
        mb={3}
      >
        <Box>
          <Text color="grey" icon={CommentIcon} mb={[2, 0]}>
            {comment.user?.username ? (
              <>
                {getLocaleString("comCommentBy")}{" "}
                <Link href={`/user/${comment.user.username}`} passHref>
                  <Text as="a">{comment.user.username}</Text>
                </Link>{" "}
                {getLocaleString("comOn")}{" "}
                {comment.type === "torrent" && (
                  <>
                    {comment.torrent ? (
                      <Link
                        href={`/torrent/${comment.torrent.infoHash}`}
                        passHref
                      >
                        <Text
                          as="a"
                          icon={File}
                          iconColor="primary"
                          iconTextWrapperProps={{
                            style: { verticalAlign: "text-bottom" },
                          }}
                        >
                          {comment.torrent.name}
                        </Text>
                      </Link>
                    ) : (
                      "deleted torrent"
                    )}
                  </>
                )}
                {comment.type === "announcement" && (
                  <>
                    {comment.announcement ? (
                      <Link
                        href={`/announcements/${comment.announcement.slug}`}
                        passHref
                      >
                        <Text
                          as="a"
                          icon={News}
                          iconColor="primary"
                          iconTextWrapperProps={{
                            style: { verticalAlign: "text-bottom" },
                          }}
                        >
                          {comment.announcement.title}
                        </Text>
                      </Link>
                    ) : (
                      "deleted announcement"
                    )}
                  </>
                )}
                {comment.type === "request" && (
                  <>
                    {comment.request ? (
                      <Link
                        href={`/requests/${comment.request.index}`}
                        passHref
                      >
                        <Text
                          as="a"
                          icon={CommentAdd}
                          iconColor="primary"
                          iconTextWrapperProps={{
                            style: { verticalAlign: "text-bottom" },
                          }}
                        >
                          {comment.request.title}
                        </Text>
                      </Link>
                    ) : (
                      "deleted request"
                    )}
                  </>
                )}
              </>
            ) : (
              <>
                {getLocaleString("comCommentBy")}{" "}
                <Text as="span" color="grey">
                  {getLocaleString("comDelUser")}
                </Text>
              </>
            )}
          </Text>
          {comment.rating && (
            <Box mt={2}>
              <RatingStars score={comment.rating} />
            </Box>
          )}
        </Box>
        <Text color="grey" textAlign="right">
          {getLocaleString("reqPosted")}{" "}
          {moment(comment.created).format(`${getLocaleString("indexTime")}`)}
        </Text>
      </Box>
      <Text>{comment.comment}</Text>
    </Box>
  );
};

export default Comment;
